<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>对象存储上传测试</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but osd doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app">
      <input type="file" id="file" onChange="preview(this)"/>
    </div>
  </body>
</html>
<script>
  //上传图片
  function preview(obj){
    // let selectFile =  document.getElementById('file').value // 获取文件
    let selectFile = document.getElementById("file").files[0]
    // selectFile.lastModifiedDate // 上次修改时间
    // selectFile.size // 大小(字节)
    // selectFile.type // 类型
    let filename = selectFile.name // 名称

    let file = obj.files[0]
    UpladFile(file, filename)
  }

  //上传文件方法
  function UpladFile(fileObj, fileName) {
    let appid = '01234567890123456789012345678901'
    let bucket = 'webspider'
    let secretKey = '98765432109876543210987654321098'
    // let fileName = '女孩人像插画.png'
    let url = 'http://127.0.0.1:5000/files?appid=' + appid + '&bucket=' + bucket + '&secretKey=' + secretKey + '&fileName=' + fileName

    let form = new FormData() // FormData对象
    form.append("file", fileObj) // 文件对象
    xhr = new XMLHttpRequest() // XMLHttpRequest对象
    xhr.open("post", url, true) // post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
    xhr.send(form); //开始上传，发送form数据
    xhr.onreadystatechange = function () {
      var data = xhr.responseText;
      console.log(data);
    }
  }
 </script>
